<template>
  <div class="container-content">
    <el-form
      ref="elForm"
      :model="formData"
      size="small"
      label-width="100px"
      label-position="right"
    >
      <el-row :gutter="15">
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label-width="160px" label="票据号" prop="billNo">
                <el-input
                  v-model="formData.billNo"
                  placeholder="请输入票据号"
                  :maxlength="11"
                  show-word-limit
                  clearable
                  prefix-icon="el-icon-mobile"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="票据类型"
                prop="billType"
              >
                <el-select
                  v-model="formData.billType"
                  placeholder="请选择票据类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in billTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="签发日"
                prop="issuanceTime	"
              >
                <el-date-picker
                  v-model="formData.issuanceTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择签发日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="票面利率"
                prop="faceRate"
              >
                <el-input
                  v-model="formData.faceRate"
                  placeholder="请输入票面利率"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="币别"
                prop="kingBaseCurrencyId"
              >
                <el-select
                  v-model="formData.kingBaseCurrencyId"
                  placeholder="请选择币别"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in kingBaseCurrencyIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label-width="160px"
                label="结算状态"
                prop="settlementStatus"
              >
                <el-select
                  v-model="formData.settlementStatus"
                  placeholder="请选择结算状态"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in settlementStatusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="承兑人"
                prop="acceptanceBankId"
              >
                <el-select
                  v-model="formData.acceptanceBankId"
                  placeholder="请选择承兑人"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in acceptanceBankIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="票据流水号"
                prop="billSerialNo"
              >
                <el-input
                  v-model="formData.billSerialNo"
                  placeholder="请输入票据流水号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="数据状态"
                prop="dataStatus"
              >
                <el-select
                  v-model="formData.dataStatus"
                  placeholder="请选择数据状态"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in dataStatusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="160px" label="到期日" prop="dueTime">
                <el-date-picker
                  v-model="formData.dueTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择到期日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="票面金额	"
                prop="faceAmount"
              >
                <el-input
                  v-model="formData.faceAmount"
                  placeholder="请输入票面金额	"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款银行账户地址"
                prop="payBankAddress"
              >
                <el-input
                  v-model="formData.payBankAddress"
                  placeholder="请输入付款银行账户地址"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款银行账户名称"
                prop="payBankName"
              >
                <el-input
                  v-model="formData.payBankName"
                  placeholder="请输入付款银行账户名称"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="收款银行"
                prop="receiptBank"
              >
                <el-input
                  v-model="formData.receiptBank"
                  placeholder="请输入收款银行"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="收款银行地址"
                prop="receiptBankAddress"
              >
                <el-input
                  v-model="formData.receiptBankAddress"
                  placeholder="请输入收款银行地址"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="收款单位Id"
                prop="receiptDeptId"
              >
                <el-input
                  v-model="formData.receiptDeptId"
                  placeholder="请输入收款单位Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款单位类型"
                prop="receiptDeptType"
              >
                <el-select
                  v-model="formData.receiptDeptType"
                  placeholder="请选择付款单位类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in receiptDeptTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款银行账号"
                prop="payBankAccount"
              >
                <el-input
                  v-model="formData.payBankAccount"
                  placeholder="请输入付款银行账号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款银行Id"
                prop="payBankId"
              >
                <el-input
                  v-model="formData.payBankId"
                  placeholder="请输入付款银行Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="付款组织Id"
                prop="payDeptId"
              >
                <el-input
                  v-model="formData.payDeptId"
                  placeholder="请输入付款组织Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="收款银行账号"
                prop="receiptBankAccount"
              >
                <el-input
                  v-model="formData.receiptBankAccount"
                  placeholder="请输入收款银行账号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="160px"
                label="收款银行名称"
                prop="receiptBankName"
              >
                <el-input
                  v-model="formData.receiptBankName"
                  placeholder="请输入收款银行名称"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { addInfo, editInfo, getDetail } from "@/api/finance/pay";
import { getBankList } from "@/api/finance/bank.js";
export default {
  props: ["rowId"],
  data() {
    return {
      formData: {
        acceptanceBankId: "",
        billNo: "",
        billSerialNo: "",
        billType: "",
        createBy: "",
        createTime: "",
        dataStatus: "",
        dueTime: "",
        faceAmount: "",
        faceRate: "",
        id: "",

        issuanceTime: "",
        kingBaseCurrencyId: "",
        params: {},
        payBankAccount: "",
        payBankAddress: "",
        payBankId: "",
        payBankName: "",
        payDeptId: "",
        receiptBank: "",
        receiptBankAccount: "",
        receiptBankAddress: "",
        receiptBankName: "",
        receiptDeptId: "",
        receiptDeptType: "",
        remark: "",
        searchValue: "",
        settlementStatus: "",
        updateBy: "",
        updateTime: "",
      },
      rules: {
        billNo: [
          {
            required: true,
            message: "请输入票据号",
            trigger: "blur",
          },
        ],
        billType: [
          {
            required: true,
            message: "请选择票据类型",
            trigger: "change",
          },
        ],
        issuanceTime: [
          {
            required: true,
            message: "请选择签发日",
            trigger: "change",
          },
        ],
        faceRate: [
          {
            required: true,
            message: "请输入票面利率",
            trigger: "blur",
          },
        ],
        kingBaseCurrencyId: [
          {
            required: true,
            message: "请选择币别",
            trigger: "change",
          },
        ],
        payBankAddress: [
          {
            required: true,
            message: "请输入付款银行账户地址",
            trigger: "blur",
          },
        ],
        acceptanceBankId: [
          {
            required: true,
            message: "请输入承兑人",
            trigger: "blur",
          },
        ],
        payBankName: [
          {
            required: true,
            message: "请输入付款银行账户名称",
            trigger: "blur",
          },
        ],
        receiptBank: [
          {
            required: true,
            message: "请输入收款银行",
            trigger: "blur",
          },
        ],
        receiptBankAddress: [
          {
            required: true,
            message: "请输入收款银行地址",
            trigger: "blur",
          },
        ],
        receiptDeptId: [
          {
            required: true,
            message: "请输入收款单位Id",
            trigger: "blur",
          },
        ],
        billSerialNo: [
          {
            required: true,
            message: "请输入票据流水号",
            trigger: "blur",
          },
        ],
        dataStatus: [
          {
            required: true,
            message: "请选择数据状态",
            trigger: "change",
          },
        ],
        dueTime: [
          {
            required: true,
            message: "请选择到期日",
            trigger: "change",
          },
        ],
        faceAmount: [
          {
            required: true,
            message: "请输入票面金额	",
            trigger: "blur",
          },
        ],
        payBankAccount: [
          {
            required: true,
            message: "请输入付款银行账号",
            trigger: "blur",
          },
        ],
        payBankId: [
          {
            required: true,
            message: "请输入付款银行Id",
            trigger: "blur",
          },
        ],
        payDeptId: [
          {
            required: true,
            message: "请输入付款组织Id",
            trigger: "blur",
          },
        ],
        receiptBankAccount: [
          {
            required: true,
            message: "请输入收款银行账号",
            trigger: "blur",
          },
        ],
        receiptBankName: [
          {
            required: true,
            message: "请输入收款银行名称",
            trigger: "blur",
          },
        ],
        receiptDeptType: [
          {
            required: true,
            message: "请选择付款单位类型",
            trigger: "change",
          },
        ],
        settlementStatus: [
          {
            required: true,
            message: "请选择结算状态",
            trigger: "change",
          },
        ],
      },
      billTypeOptions: [
        {
          label: "test",
          value: 1,
        },
      ],
      kingBaseCurrencyIdOptions: [],
      dataStatusOptions: [
        {
          label: "创建",
          value: 1,
        },
        {
          label: "审核中",
          value: 2,
        },
        {
          label: "已审核",
          value: 3,
        },
      ],
      receiptDeptTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      settlementStatusOptions: [
        {
          label: "为空",
          value: 1,
        },
        {
          label: "到期付款",
          value: 2,
        },
        {
          label: "退票",
          value: 3,
        },
      ],
      acceptanceBankIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
    };
  },
  methods: {
    submit(cb) {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        if (this.rowId) {
          editInfo(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              cb();
            }
          });
        } else {
          addInfo(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "新增成功！",
                type: "success",
              });
              cb();
            }
          });
        }
      });
    },
  },
  mounted() {
    this.getDicts("king_currency_type").then((res) => {
      this.kingBaseCurrencyIdOptions = res.data.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
    });
    getBankList().then((res) => {});
    if (this.rowId) {
      console.log(this.rowId);
      getDetail(this.rowId).then((res) => {
        if (res.code === 200) {
          this.formData = res.data.kingFinancePayBillEntity;
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
</style>
